<template>
	<div>
		<van-row style="width: 100vw;height: 8vh;">
			<van-col span="19" style="text-align: left; margin-left: 3%;line-height: 8vh;font-weight: 600;font-size: 17px;">
				购物车
			</van-col>
			<van-col span="3" style="text-align: left; margin-left: 3%;line-height: 8vh;font-size: 15px;" @click="removeall()">
				管理
			</van-col>
		</van-row>
		<van-row style="width: 100vw;height: 3vh;">
			<van-col :span="23" style="margin-left: 3%;font-size: 10px;color: #ccc;line-height: 1vh;text-align: left;">
				共{{cartmenu.length}}件宝贝
			</van-col>
		</van-row>
		<van-row style="width: 100vw;height: 100%;margin-top: 4vh;">
			<van-col :span="24"  v-for="(item,index) in cartmenu" :key="index">
				<van-swipe-cell>
				<van-row style="width: 94vw;height: 18vh;border-radius: 10px;margin-left: 3vw;box-shadow: -1px -1px 3px #ccc inset;">
					<van-col span="3" style="height: 100%;line-height: 19vh;">
						<van-checkbox v-model="checked" style="margin-top: 7vh;margin-left: 50%;"></van-checkbox>
					</van-col>
					<van-col span="6" style="height: 100%;line-height: 19vh;">
						<div style="margin-top: 12px;">
							<van-image :src="url+item.goods_img" style="width: 90%;height: 90%;margin-top: 10px;"></van-image>
						</div>
					</van-col>
					<van-col span="12" style="height: 100%;line-height: 18vh;">
						<van-row style="width: 100%;height: 6vh;">
							<van-col span="24" style="line-height: 9vh;font-size: 17px;font-weight: 600;text-align: left;display: -webkit-box;
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 1;
　　overflow: hidden;">{{item.goods_name}}</van-col>
						</van-row>
						<van-row style="width: 100%;height: 5vh;">
							<van-col span="15" style="line-height: 0vh;font-size: 14px;text-align: left;color: #ccc;">闪电转SD卡</van-col>
							<van-col span="4" style="line-height: 0vh;font-size: 14px;text-align: left;color: #ccc;">RMB</van-col>
						</van-row>
						<van-row style="width: 100%;height: 5vh;">
							<van-col span="24" style="line-height: 7vh;font-size: 17px;font-weight: 500;text-align: left;color: red;" class="cartprice">￥{{item.price}}</van-col>
						</van-row>
					</van-col>
					<van-col span="3" style="height: 100%;line-height: 18vh;">
						<van-row style="width: 100%;height: 9vh;">
							<van-col style="height: 9vh;line-height: 8vh;font-size: 10px;color: #ccc;text-align: right;">领券</van-col>
						</van-row>
						<van-row style="width: 100%;height: 9vh;">
							<van-col style="height: 9vh;line-height: 10vh;font-size: 10px;">
								<div style="width: 8vw;height: 3vh;border: 1px solid #000;border-radius: 5px;text-align: center;line-height: 3vh;margin-top: 4vh;">×{{item.number}}</div>
							</van-col>
						</van-row>
					</van-col>
				</van-row>
				<template #right>
				    <van-button square type="danger" text="删除" class="lll" @click="removecart(item.id)"/>
				    <van-button square type="primary" text="收藏" class="lll"/>
				  </template>
				</van-swipe-cell>
			</van-col>
		</van-row>
		<van-submit-bar :price="num*100" button-text="结算" button-color="black" style="margin-bottom: 55px;">
		  <van-checkbox v-model="checked">全选</van-checkbox>
		</van-submit-bar>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
	  data() {
	    return {
		  url:'https://img.9lele.com',
		  checked:false,
		  cartmenu:[]
	    };
	  },
	  computed: {
	    ...mapGetters([
	      'carts',
		  'removecarts'
	    ]),
		num: function() {
			let result = 0
			this.cartmenu.map((e)=>{
				result +=e.price*1
			})
			return result
		}
	  },
	  created() {
		this.cartss()
	  },
	  methods:{
		  cartss(){
			  let memberid = JSON.parse(localStorage.getItem('usernews')).member_id
			  console.log(memberid)  
			  this.$store.dispatch("vuexCart",memberid*1)
			  .then(e=>{
			    console.log(e)
			    this.cartmenu = e.data.data
			    console.log(this.cartmenu)
			  })
		  },
		  removecart(id){
			  console.log(id)
			  this.$store.dispatch("vuexRemovecart",id)
			  .then(e=>{
				  this.cartss()
			    console.log(e)
			  })
		  },
		  
		  removeall(){
			  let id = JSON.parse(localStorage.getItem('usernews')).member_id
			  this.$store.dispatch("vuexRemoveall",id)
			  .then(e=>{
			    this.cartss()
			    console.log(e)
			  })
		  }
	  }
	  }
</script>

<style>
	.lll{
		height: 100%;
	}
</style>
